<template>
  <div>
    <el-table border class="inputcolumn" :data="selectedDataCopy" style="width: 1000px">
      <el-table-column label="商品图片" align="center" prop="carouselImg">
        <template slot-scope="scope">
          <el-image v-if="
            scope.row.carouselImg != null && scope.row.carouselImg != ''
          " slot="reference" :src="scope.row.carouselImg" class="image-rows"
            :preview-src-list="[scope.row.carouselImg]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="productName" :show-overflow-tooltip="true" min-width="120">
      </el-table-column>
      <el-table-column label="零售价" align="center" prop="retailPriceStr" />

      <el-table-column label="库存" align="center" prop="stockNumber" sortable />

      <el-table-column align="center" prop="receiveNumber" label="操作" v-if="canDelete">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDeleteser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    selectedData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    canDelete: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      selectedDataCopy: [],
      pageSizess: [5, 10, 15, 20, 25, 30, 50],
      total: this.selectedData.length,
      pageNum: 1,
      pageSize: 5,
    };
  },
  created() {
    if (this.total > 0) {
      this.getList();
    }
  },
  methods: {
    getList() {
      this.selectedDataCopy = [];
      let startNum = (this.pageNum - 1) * this.pageSize;
      let endNum = this.pageNum * this.pageSize;
      this.selectedData.forEach((data, index) => {
        if (index >= startNum && index < endNum) {
          this.selectedDataCopy.push(data);
        }
      })

      if (this.selectedDataCopy.length == 0) {
        if (this.pageNum > 1) {
          this.pageNum = this.pageNum - 1
          this.getList()
        }
      }



    },
    handleDeleteser(val, row) {
      // 模态框删除按钮
      this.$confirm("是否确认删除本条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        let index = null
        this.selectedData.forEach((card, idx) => {
          if (card.productUid == row.productUid) {
            index = idx
          }
        })
        this.selectedData.splice(index, 1);

        //数据回传
        this.getList();

      });
    },
  },
};
</script>

</style>
